<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器学习算法的检测数据</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style type="text/css">

        /* div{
            display: inline-block;
        } */
        * {
          margin: 0;
          padding: 0;
        }
    
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #111;
          min-height: 100vh;
        }
        .container {
          /* position: relative; */
          display: flex;
          justify-content: center;
          
          padding: 40px 0px;
          flex-wrap: wrap;
        }
    
        .container .card {
          /* position: relative; */
          width: 320px;
          height: 400px;
          color: #fff;
          background-color: #111;
          display: flex;
          
          margin: 20px 30px;
          transition: .5s;
        }
    
        .container .card:hover {
          transform: translateY(-25px);
        }
    
        .container .card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, #ffbc00, #ff0058);
        }
/*     
        .container .card::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, #ffbc00, #ff0058);
          filter: blur(30px);
        } */
    
        /* .container .card:nth-child(2):after,
        .container .card:nth-child(2):before {
          background: linear-gradient(315deg, #03a9f4, #ff0058);
        }
    
        .container .card:nth-child(3):after,
        .container .card:nth-child(3):before {
          background: linear-gradient(315deg, #4dff03, #00d0ff);
        } */
    
       
    </style>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="container">
<div id="main" class="card" style="width: 400px;height:200px;"></div>
<div id="main1" style="width: 400px;height:200px;"><div class="card"></div>
<div id="main2" style="width: 600px;height:400px;"><div class="card"></div>
<div id="main3" style="width: 600px;height:400px;"><div class="card"></div></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '多项朴素贝叶斯算法的检测数据'
        },
        tooltip: {},
        legend: {
            data: [{
                name: '检测结果',
                // 强制设置图形为圆。
                icon: 'circle',
                // 设置文本为红色
                textStyle: {
                    color: 'green'
                }
            }]
        },
        xAxis: {
            data: ["准确率", "Precesion", "Recall", "F1-score", "Accuracy", "AUC"]
        },
        yAxis: {
            min: 0.90,
            max: 1,
            // axisLabel: {
            //     formatter: function (value) {
            //         var texts = [];
            //         if (value == 0) {
            //             texts.push('0');
            //         }
            //         else if (value <= 0.5) {
            //             texts.push('0.5');
            //         }
            //         else if (value <= 0.75) {
            //             texts.push('0.75');
            //         }
            //         else if (value <= 0.9) {
            //             texts.push('0.9');
            //         }
            //         else if (value <= 0.95) {
            //             texts.push('0.95');
            //         }
            //         else if (value <= 0.96) {
            //             texts.push('0.96');
            //         }
            //         else if (value <= 0.97) {
            //             texts.push('0.97');
            //         }
            //         else if (value <= 0.98) {
            //             texts.push('0.98');
            //         }
            //         else if (value <= 0.99) {
            //             texts.push('0.99');
            //         }
            //         else {
            //             texts.push('1.2');
            //         }
            //         return texts;

            //     }
            // }
        },
        series: [{
            name: '检测结果',
            type: 'line',
            data: [ 0.9935285145201179, 0.9862769710699224, 0.9893774436119653, 0.9935285145201179, 0.986260482643101, 0.9085260711727436]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);



    var myChart1 = echarts.init(document.getElementById('main1'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: 'KNN邻近算法'
        },
        tooltip: {},
        legend: {
            data: [{
                name: '检测结果',
                // 强制设置图形为圆。
                icon: 'circle',
                // 设置文本为红色
                textStyle: {
                    color: 'green'
                }
            }]
        },
        xAxis: {
            data: ["准确率", "Precesion", "Recall", "F1-score", "Accuracy", "AUC"]
        },
        yAxis: {
            min: 0.90,
            max: 1,

        },
        series: [{
            name: '检测结果',
            type: 'line',
            data: [ 0.9960238126971434, 0.9892769710699265, 0.9853720436119653, 0.9960238126971434, 0.993260722644104, 0.9075260711727465]
        }]
    };
        myChart1.setOption(option1);


    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: '随机森林'
        },
        tooltip: {},
        legend: {
            data: [{
                name: '检测结果',
                // 强制设置图形为圆。
                icon: 'circle',
                // 设置文本为红色
                textStyle: {
                    color: 'green'
                }
            }]
        },
        xAxis: {
            data: ["准确率", "Precesion", "Recall", "F1-score", "Accuracy", "AUC"]
        },
        yAxis: {
            min: 0.90,
            max: 1,

        },
        series: [{
            name: '检测结果',
            type: 'line',
            data: [ 0.9974972973773454, 0.9912769710699274, 0.9929720436117552, 0.9974972973773454, 0.991460782644243, 0.9125260711727632]
        }]
    };
    myChart2.setOption(option2);




    var myChart3 = echarts.init(document.getElementById('main3'));

    // 指定图表的配置项和数据
    var option3 = {
        title: {
            text: 'XgBoost'
        },
        tooltip: {},
        legend: {
            data: [{
                name: '检测结果',
                // 强制设置图形为圆。
                icon: 'circle',
                // 设置文本为红色
                textStyle: {
                    color: 'green'
                }
            }]
        },
        xAxis: {
            data: ["准确率", "Precesion", "Recall", "F1-score", "Accuracy", "AUC"]
        },
        yAxis: {
            min: 0.90,
            max: 1,

        },
        series: [{
            name: '检测结果',
            type: 'line',
            data: [0.996260782644108, 0.9962769710699299, 0.9999720436119653, 0.9981210875368575, 0.996260782644108, 0.9185260711727488]

        }]
    };
    myChart3.setOption(option3);
</script>
</body>
</html>